<template>
  <div>
<!--    查询-->
    <div class="demo-input-size">
    <el-form ref="formch" :model="formch"  width="30px"   size="small">
      <el-form-item label="摄像机名称">
        <el-input v-model="formch.monitoringName"></el-input>
      </el-form-item>
      <el-form-item label="设备类型">
        <el-select v-model="formch.monitoringType" placeholder="请选择设备类型">
          <el-option label="枪型" :value=1></el-option>
          <el-option label="球型" :value=2></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备状态">
        <el-select v-model="formch.typeId" placeholder="请选择设备状态">
          <el-option label="在线" :value=4></el-option>
          <el-option label="离线" :value=5></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="国标编码" >
        <el-input v-model="formch.monitoringEncoding"></el-input>
      </el-form-item>

    <el-button type="primary" @click="MonitList">查询</el-button>
    </el-form>
    </div>


    <el-button size="mini" type="danger" @click="handleDelete">批量删除</el-button>


<!--    ------------------------列表--------------------------->
      <el-table :data="mon" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="id" width="180"  ref="multipleTable" >
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.monitoringId }}</span>
          </template>
        </el-table-column>

        <el-table-column label="摄像头名称" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.monitoringName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="国标编码" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.monitoringEncoding }}</span>
          </template>
        </el-table-column>

        <el-table-column label="摄像机类型" width="180">
          <template slot-scope="scope">
            <span v-show="scope.row.monitoringType==1">枪机</span>
            <span v-show="scope.row.monitoringType==2">球机</span>
          </template>
        </el-table-column>

        <el-table-column label="所属小区" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.residenceName }}</span>
          </template>
        </el-table-column>

        <el-table-column label="经度" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.monitoringLongitude }}</span>
          </template>
        </el-table-column>

        <el-table-column label="纬度" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.monitoringLatitude }}</span>
          </template>
        </el-table-column>

        <el-table-column label="设备状态" width="180">
          <template slot-scope="scope">
            <span v-show="scope.row.typeId==4">在线</span>
            <span v-show="scope.row.typeId==5">离线</span>
          </template>
        </el-table-column>

        <el-table-column label="接收ip" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.ip }}</span>
          </template>
        </el-table-column>

        <el-table-column label="MAC地址" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.mac }}</span>
          </template>
        </el-table-column>

        <el-table-column label="设备安装地点" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.monitoringInstallationsite }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row.monitoringId)">编辑</el-button>
          </template>
        </el-table-column>

      </el-table>



    <!--      弹窗回显车辆-->
      <el-button type="text" @click="monadds">添加</el-button>
      <el-dialog :title=title :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules"  ref="ruleForm">
          <el-form-item label="摄像头名称" :label-width="formLabelWidth" prop="vehicleInformationName">
            <el-input v-model="form.monitoringName" autocomplete="off"></el-input>
          </el-form-item>

           <el-form-item label="国标编码" :label-width="formLabelWidth" prop="monitoringEncoding">
            <el-input v-model="form.monitoringEncoding" autocomplete="off"></el-input>
          </el-form-item>


          <el-form-item label="所属小区" prop="typeId">
            <el-select v-model="form.id" placeholder="请选择小区">
              <el-option
                v-for="item in option"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

           <el-form-item label="摄像机类型" :label-width="formLabelWidth" prop="monitoringType">
            <el-select v-model="form.monitoringType" placeholder="请选择设备类型">
             <el-option label="枪机" :value="1"></el-option>
             <el-option label="球机" :value="2"></el-option>
             </el-select>
          </el-form-item>


           <el-form-item label="经度" :label-width="formLabelWidth" prop="monitoringLongitude">
            <el-input v-model="form.monitoringLongitude" autocomplete="off"></el-input>
          </el-form-item>


           <el-form-item label="纬度" :label-width="formLabelWidth" prop="monitoringLatitude">
            <el-input v-model="form.monitoringLatitude" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="设备状态" :label-width="formLabelWidth" prop="typeId">
            <el-select v-model="form.typeId" placeholder="请选择设备状态">
              <el-option label="在线" :value="4"></el-option>
              <el-option label="离线" :value="5"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="接收ip" :label-width="formLabelWidth" prop="ip">
            <el-input v-model="form.ip" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="MAC地址" :label-width="formLabelWidth" prop="mac">
            <el-input v-model="form.mac" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="设备安装地点" :label-width="formLabelWidth" prop="monitoringInstallationsite">
            <el-input v-model="form.monitoringInstallationsite" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="verify">确 定</el-button>
        </div>
      </el-dialog>


    <div class="fen">
      <span class="demonstration">分页</span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formch.pageNum"
        :page-sizes="[20, 50, 80, 100]"
        :page-size="formch.pageSize"
        layout="sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {list, monList} from "@/api/system/monit";
  import {monAdd} from "@/api/system/monit";
  import {del} from "@/api/system/monit";
  import {echo} from "@/api/system/monit";
import {MessageBox} from "element-ui";

export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"
      return {
        //列表
        total:0,
        mon:[],
        //条件
        formch:{
          pageNum:1,
          pageSize:20,
          monitoringName:'',
          monitoringType:'',
          typeId:'',
          monitoringEncoding:'',
        },
        //弹窗
        form:{
          monitoringName:'',
          monitoringEncoding:'',
          monitoringType:'',
          typeId:'',
          monitoringInstallationsite:'',
          monitoringLongitude:'',
          monitoringLatitude:'',
          ip:'',
          mac:'',
          residenceName:'',
        },
        option:[],

        //效验
        rules:{
          monitoringName: [
            { required: true, message: '请输入监控名称', trigger: 'blur' },
          ],
          monitoringEncoding:[
            { required: true, message: '请输入监控编码', trigger: 'blur' },
          ],
          monitoringType:[
            { required: true, message: '请选择监控类型', trigger: 'blur' },
          ],
          typeId: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          monitoringInstallationsite:[
            { required: true, message: '请输入安装地点', trigger: 'blur' },
         ],
          ip:[
            { required: true, message: '请输入ip地址', trigger: 'blur' },
          ],
          mac:[
            { required: true, message: '请输入mac地址', trigger: 'blur' },
          ],
          residenceName:[
            { required: true, message: '请输入所属小区', trigger: 'blur' },
          ]
        },
        //回显车辆信息
        dialogTableVisible: false,
        dialogFormVisible: false,
        formLabelWidth: '120px',
        title: '添加车辆',

        //选中
        multipleSelection:[],

      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      // 列表查询
      MonitList(){
        list(this.formch).then(
          res=>{
            this.mon=res.data.list
            this.total=res.data.total
          }
        )
      },
      //添加
      verify(){
        MessageBox.confirm("确认添加吗?",'添加',{
          confirmButtonText:'确认',
          cancelButtonText:'取消',
          type: "warning",
        }).then(() => {
          monAdd(this.form).then(
            res=>{
              this.$message.success("添加成功");
              this.dialogFormVisible = false;
              this.MonitList()
            }
          )
        })
      },
      // 小区
    MonList() {
      monList().then(
        res => {
        this.option = res.data;
      })
    },
      //回显
      handleEdit(monitoringId){
        this.title='回显监控'
        this.dialogFormVisible = true;
        echo(monitoringId).then(
          res => {
            this.form=res.data
          }
        )
      },
      //批量删除
      handleDelete(){
        if (this.multipleSelection.length===0){
          this.$message.warning("请选择一个");
        }
        MessageBox.confirm("确认删除吗?", "提示", {
          confirmButtonText:'确认',
          cancelButtonText:'取消',
          type: "warning",
        }).then(() => {
          let monitoringId = []
          this.multipleSelection.forEach(item => {
            monitoringId.push(item.monitoringId)
          })
          del(monitoringId).then(
            res => {
              this.$message.success("删除成功");
              this.MonitList()
            }
          )
        })
      },
      //选中
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //分页
      handleSizeChange(val) {
        this.formch.pageNum=val
        console.log(`每页 ${val} 条`);
        this.MonitList()
      },
      handleCurrentChange(val) {
        this.formch.pageSize=val
        console.log(`当前页: ${val}`);
        this.MonitList()
      },
      //弹窗
      monadds(){
        this.dialogFormVisible = true
        //清空缓存
        this.form={
          monitoringName:'',
          monitoringEncoding:'',
          monitoringType:'',
          typeId:'',
          monitoringInstallationsite:'',
          monitoringLongitude:'',
          monitoringLatitude:'',
          ip:'',
          mac:'',
          residenceName:'',
        }
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.MonitList()
      this.MonList()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
